<!DOCTYPE html>
<html>
<head>
    <title>上传图片生成你得证件照</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body id='body' style="margin: 0px;padding: 0px;position:relative;background-image: url('/Public/projects/facego/dw_BG2.jpg');
    background-repeat:no-repeat;background-size: 100% 100%;">
<img src="" alt="" id="image4" style="position:absolute;left:8%;width: 80%">
<img src="/Public/projects/facego/wait.png" alt="" style="position:absolute;top:200px;z-index:200;" id="img_wait">
<div class="mask" id="mask" style="display: none">
    <img src="/Public/projects/facego/img_share.png">
</div>
<img src="/Public/projects/facego/back.png" onclick="window.location.href='/Wap/Applications/rlrh_index';return false;"
     style="position:fixed;left:40%;width:20%;z-index:201;bottom:5%">

<canvas id="canvas" style="top: 0px;left: 0px;position:absolute;display: none"></canvas>
<canvas id="canvas1"style="top: 0px;left: 0px;position:absolute;display: none"></canvas>
<!--<audio id="bgm" src="/Public/projects/facego/assets/media/bgm.mp3" loop="loop">
    您的浏览器不支持 audio 标签。
</audio>
<div class="ico-music1 ico"></div>-->
</body>
<style>
    .border1{
        -webkit-transform: translateY(120%);
        transform: translateY(105%);
        -webkit-transition:2s all ease;
        transition:2s all ease;
    }
    .mask{
        background-color: rgba(0,0,0,.7);
        z-index: 1000;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
    .mask img{
        position: absolute;
        top: 0;
        right: 0;
    }
    .ico-music1 {
        width: 22.66666667px;
        height: 26.66666667px;
        position: fixed;
        z-index: 9;
        top: 20px;
        right: 10px;
        background-image: url(/Public/projects/facego/assets/ui/dw_ico_music1.png);
    }
    .ico {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .animRotate {
        animation-duration: 4s;
        animation-iteration-count: 9999;
        animation-delay: 0s;
        animation-timing-function: linear;
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count: 9999;
        -webkit-animation-delay: 0s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: animRotate;
        -moz-animation-name: animRotate;
        -o-animation-name: animRotate;
        animation-name: animRotate;
    }
    @-webkit-keyframes animRotate {
        0% {
            -webkit-transform-origin: center;
            transform-origin: center;
        }
        33% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 120deg);
            transform: rotate3d(0, 0, 1, 120deg);
        }
        66% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 240deg);
            transform: rotate3d(0, 0, 1, 240deg);
        }
        100% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
        }
    }
    @keyframes animRotate {
        0% {
            -webkit-transform-origin: center;
            transform-origin: center;
        }
        33% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 120deg);
            transform: rotate3d(0, 0, 1, 120deg);
        }
        66% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 240deg);
            transform: rotate3d(0, 0, 1, 240deg);
        }
        100% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
        }
    }
</style>
<script src="/Public/projects/facego/libs/jquery-3.1.1.min.js"></script>
<!--WeiXin-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!--BaiDu 统计-->
<script src="/Public/js/common/baidutongji.js"></script>
<script>
    var my_music_play = false;
    function toggleMusic(boo) {
        var music = $(".ico-music1");
        if(!boo){
            music.removeClass("animRotate");
            $("#bgm")[0].pause();
        }else{
            music.addClass("animRotate");
            $("#bgm")[0].play();
        }
    }
    $(".ico-music1").click(function () {
        toggleMusic(!$(this).hasClass("animRotate"));
    });

    setTimeout(function(){
        if(typeof WeixinJSBridge == 'undefined' ){
            toggleMusic(true)
            return
        }
        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            toggleMusic(true)
        })
    },2000);
    $('#mask').click(function(){
        $(this).hide();
    });
    document.getElementById("image4").src= "<?php echo $img?>";
    document.getElementById("image4").onload = function(){
        document.getElementById("img_wait").style.display = 'none';
        document.getElementById("image4").style.top = "-" + document.getElementById("image4").height + "px";
        document.getElementById("image4").className = 'border1';
    }
    $(function(){
        wxShareConfig();
    });
    function getWxShare(cb) {
        $.ajax({
            url:"weixinShare",
            typ:'get',
            data:{
                url: 'http://esm.zbxinmeiti.com/Wap/Applications/rlrh_index'
            },
            success:function (result) {
                if(result.status != 1){
                    //alert(result.msg);
                }else{
                    cb && cb(result);
                }
            }
        });
    }
    function wxShareConfig(){
        getWxShare(function (ws) {
            wx.config({
                debug: false,
                appId: ws['appId'],
                timestamp: ws['timestamp'],
                nonceStr: ws['nonceStr'],
                signature: ws['signature'],
                jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
            });
            wx.error(function(res){
                console.log(res);
            });
            wx.ready( function( e ){
                wx.onMenuShareAppMessage({
                    title: "上传图片生成你得证件照",
                    desc: "一键生成你得证件照",
                    link: "http://" + window.location.host + "/Wap/Applications/rlrh",
                    imgUrl: "http://" + window.location.host + "/Public/projects/facego/rlrh_share.jpg",
                    type: 'link',
                    dataUrl: '',
                    success: function () {},
                    cancel: function () {}
                });
                wx.onMenuShareTimeline({
                    title: "上传图片生成你得证件照",
                    link: "http://" + window.location.host + "/Wap/Applications/rlrh",
                    imgUrl: "http://" + window.location.host + "/Public/projects/facego/rlrh_share.jpg",
                    success: function () {},
                    cancel: function () {}
                });
            })
        });
    }
    function median(filterWidth, filterHeight, dataArray, width, height) {
        var temp = [];
        for(var i=0; i<dataArray.length; i++) {
            temp.push(dataArray[i]);
        }
        for(var x=(filterWidth-1)/2; x<width-(filterWidth-1)/2; x++) {
            for(var y=(filterHeight-1)/2; y<width-(filterHeight-1)/2; y++) {
                var tempArray = [];
                for(var i=-(filterWidth-1)/2; i<=(filterWidth-1)/2; i++) {
                    for(var j=-(filterHeight-1)/2; j<=(filterHeight-1)/2; j++) {
                        tempArray.push(temp[(j+y)*width+i+x]);
                    }
                }
                // 泡沫排序，找出中值
                do {
                    var loop = 0;
                    for(var i=0; i<tempArray.length-1; i++) {
                        if(tempArray[i]>tempArray[i+1]) {
                            var tempChange = tempArray[i];
                            tempArray[i] = tempArray[i+1];
                            tempArray[i+1] = tempChange;
                            loop = 1;
                        }
                    }
                }while(loop);
                dataArray[y*width+x] = tempArray[Math.round(tempArray.length/2)];
            }
        }
        return dataArray;
    }
</script>
</html>